<template>
  <div class="Aside">
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        text-color="#fff"
        :default-active="activeMenu"
        class="el-menu-vertical-demo"
        :collapse="store.isCollapse"
        @select="selectMenu"
      >
        <AsideItem v-for="v in routes" :key="v.path" :v="v" />
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
import { computed, onMounted, reactive, ref, toRefs } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import AsideItem from "./AsideItem.vue";
import { useMainStore } from "@/stores/main.js"
export default {
  components: { AsideItem },
  setup() {

    const $route = useRoute()
    const $router = useRouter()

    const data = reactive({
      activeMenu: computed(() => $route.path),
      routes: [],
      store: useMainStore()
    })

    onMounted(() => {
      const routeVal = $router.getRoutes().filter((item) => item.path === "/")[0].children
      data.routes = makeRoute(routeVal, '')
    })


    function makeRoute(routeVal, fullPath) {
      return routeVal.filter(item => item.meta && item.meta.title).map(item => {
        if (~item.path.indexOf('/')) {
          item.fullPath = item.path
        } else {
          item.fullPath = fullPath + '/' + item.path
        }
        if (item.children?.length) {
          item.children = makeRoute(item.children, item.path)
        }
        return item
      })
    }

    function selectMenu(index, indexPath) {
      if (index.indexOf('/') === 0) {
        $router.push(index)
      } else {
        $router.push(indexPath.map(v => `${v.indexOf('/') === 0 ? '' : '/'}${v}`).join(''))
      }
    }

    return {
      ...toRefs(data),
      selectMenu,
    }
  },
}
</script>

<style lang="scss" scoped>
.Aside {
  height: 100%;
  overflow: hidden;
  text-align: left;
  .el-menu-vertical-demo {
    border-right: 0px;
    height: 100%;
    // 菜单栏宽度
    &:not(.el-menu--collapse) {
      width: 200px;
    }
    // 层级项图标以及文字设置
    :deep(.el-sub-menu) {
      .el-sub-menu__title {
        i {
          width: 1.4em;
          flex-shrink: 0;
        }
        span {
          padding-right: 10px;
          overflow: hidden; /* 超出一行文字自动隐藏 */
          text-overflow: ellipsis; /* 文字隐藏后添加省略号 */
          white-space: nowrap; /* 强制文本不换行 */
        }
      }
    }
    // 单项图标以及文字设置
    :deep(.el-menu-item) {
      i {
        width: 1.4em;
        flex-shrink: 0;
      }
      span {
        overflow: hidden; /* 超出一行文字自动隐藏 */
        text-overflow: ellipsis; /* 文字隐藏后添加省略号 */
        white-space: nowrap; /* 强制文本不换行 */
      }
    }
  }
}
</style>